<!--
 * @Author: gaotang
 * @Date: 2025年01月03日
 * @Email: qq23745038@126.com
 * @LastEditors: gaotang
 * @LastEditTime: 2025-01-03 18:54:52
-->
<template>
    <Echart v-if="pageflag" :options="options" class="left_center_inner" ref="charts" height="230px" isClick
        @chartClick="chartClick" />
    <Reacquire v-else @onclick="getData" style="line-height: 200px">
        重新获取
    </Reacquire>
</template>

<script>
import { colorsA, colorsB, legend, xAxis, yAxis } from '@/config/EChartVar';
import { graphic } from 'echarts';

export default {
    name: 'ALeftLeftBigBottomLeft',
    data() {
        return {
            options: {},
            countUserNumData: {
                axisData: ['临沂-北京', '临沂-上海', '临沂-杭州', '临沂-苏州', '临沂-济南', '临沂-青岛', '临沂-烟台'],
                seriesData: [25, 98, 55, 98, 48, 48, 75],
            },
            pageflag: true,
            timer: null,
        };
    },
    created() {
        this.getData();
    },
    mounted() { },
    beforeDestroy() {
        this.clearData();
    },
    methods: {

        chartClick(params) {
            this.$emit('chartClick', params);
        },
        clearData() {
            if (this.timer) {
                clearInterval(this.timer);
                this.timer = null;
            }
        },
        getData() {
            this.pageflag = true;
            this.init(this.countUserNumData);
        },
        //轮询
        switper() {
            if (this.timer) {
                return;
            }
            let looper = (a) => {
                this.getData();
            };
            this.timer = setInterval(
                looper,
                2000 // this.$store.state.setting.echartsAutoTime // staticAutoTime
            );
            let myChart = this.$refs.charts.chart;
            myChart.on('mouseover', (params) => {
                this.clearData();
            });
            myChart.on('mouseout', (params) => {
                this.timer = setInterval(
                    looper,
                    2000 // this.$store.state.setting.echartsAutoTime // staticAutoTime
                );
            });
        },
        init(currentData) {
            let axisData = currentData.axisData;
            let seriesData = [
                [...currentData.seriesData],
            ];
            const options = {
                grid: {
                    top: '11%',
                    left: '4%',
                    right: '4%',
                    bottom: '1%',
                    containLabel: true,
                },
                legend: {
                    show: true,
                    top: '0%',
                    right: '9%',
                    icon: 'rect',
                    itemWidth: 12,
                    itemHeight: 6,
                    itemGap: 10,
                    textStyle: legend.textStyle,
                    // data: ['票数'],
                },
                xAxis: {
                    type: 'value', // 将 x 轴设置为数值轴
                    // max: 8000,
                    // min: 100,//
                    // interval: 2000,
                    splitLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false, // 不显示下切线
                    },
                    axisLabel: xAxis.axisLabel,
                    axisLine: {
                        lineStyle: {
                            background: 'rgba(176, 215, 255, 0.4)',
                        },
                    },
                },
                yAxis: {
                    type: 'category',
                    data: axisData,
                    // boundaryGap: false,
                    // boundaryGap: true,
                    axisLabel: yAxis.axisLabel,
                    axisLine: {
                        show: false,
                        // interval: 1,
                        lineStyle: {
                            color: 'rgba(0,0,0,0.5)',
                        },
                    },
                    splitLine: {
                        show: true,
                        // interval: 1,
                        lineStyle: {
                            color: ['rgba(176, 215, 255, 0.2)'],
                            width: 1,
                            type: 'dashed',
                        },
                    },
                    // splitLine: {
                    //   show: false,
                    // },
                    axisTick: {
                        show: false,
                    },
                },
                series: [],
            };
            const series = [
                {
                    type: 'bar',
                    barWidth: 10,
                    // 动画配置
                    animation: true,
                    animationDuration: 2000,
                    animationEasing: 'quarticInOut',
                    animationDelay: function (idx) {
                        return idx * 150;
                    },
                    showBackground: true,
                    smooth: false,
                    showSymbol: true,
                    data: seriesData[0],
                    itemStyle: {
                        normal: {
                            // color: "#38FFBA",
                            // color: 'rgba(0,219,254, .7)',
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#1EE7E7',
                                    },
                                    {
                                        offset: 1,
                                        color: '#3F95CE',
                                    },
                                ],
                                globalCoord: false,
                            },
                        },
                    },
                    lineStyle: {
                        normal: {
                            width: 2,
                        },
                    },
                    label: {
                        show: false,
                    },
                }
            ];
            options.series = series;
            this.options = options;
        },
    },
};
</script>
<style lang="scss" scoped></style>